<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>详情页</title>
	<style>
	* {
		margin:0;
		padding: 0;
		list-style: none;
	}

	#root {
		margin: 30px;
		width: 1200px;
		min-height: 1000px;
	}

	#head {
		width: 100%;
		height: 100px;
		padding: 15px;
	}

	#mid {
		width: 100%;
		height: 400px;
		position: relative;
	}
	#top_bar{
		height: 40px;
		background: #333;
		color: #999;
		top: 0;
		position: fixed;
		z-index: 10000;
		width: 100%;
		left: 0;
		min-width: 990px;
	}
	#m_left {
		width: 40%;
		height: 400px;
		position: absolute;
	}

	#m_right {
		width: 60%;
		height: 400px;
		position: absolute;
		right: 0;
		
	}
	#top_bar li a{
		font-size: 14px;
		color: #ccc;
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		text-decoration: none;
		display: inline-block;

	}
	#top_bar li a:hover{
		background: orange;
	}
	.top_bar_left a{
		float: left;
	}
	.top_bar_right a{
		float: right;
	}
	.top_nav a {
		font-size: 20px;
		text-decoration: none;
		color:black;
	}
	#nav{
		height: 30px;
		margin: 10px;
	}
	#nav .top_nav {
		list-style: none;
		float: left;
		width: 100px;
		text-align: center;
	}
	#m_right h2{
		padding: 10px;
	}
	
	#m_right button{
		background: #eb2624;
		height: 50px;
		width:100px;
		margin: 20px;
		margin-top: 50px;
	}
	#m_right button a{
		color:#fff;
		text-decoration: none;
		font-size: 15px;
		/* font-weight: bolder; */
	}
	#m_left img{
		width: 380px;
		height: 380px;
		padding: 50px;
	}
	#foot{
		width: 100%;
		height:400px;
		position: absolute;
		top:610px;
	}
	#foot>span{
		margin: 16px auto;
		float: left;
		padding-bottom: 8px;
		color: #6cc0b1;
		font-size: 18px;
		width: 1000px;
		text-align: center;
		border-bottom: 1px solid;
	}
	#cptp{
		float: left;
		font-size: 14px;
		width: 840px;
		overflow: hidden;
		margin-left: 100px;
	}
	#tbl{
		border-collapse: collapse;
		border-spacing: 0;
		font-size: 16px;
	}
	#tbl td{
		/* border:1px solid; */
		text-align: center;
		vertical-align: middle;
		width: 320px;
		border: 1px solid #d6d6d6;
		padding: 8px 30px;
		color: #333;
		width:640;
	}
	#m_right p{
		font-size: 20px;
		padding:10px;
		color:#eb2624;
	}
	#jiajian{
		height: 30px;
	}
	#jiajian>input{
		width: 50px;
		height:32px;
		background: white;
		border:1px solid #CCC;
		float: left;
	}
	#jiajian span{
		font-size: 10px;
		color:black;
	}
	#num{
		width: 70px;
		height: 30px;
		text-align: center;
		/* display:inline-block; */
		border:1px solid #CCC;
		line-height: 30px;
		float: left;
	}
	#price{
		height: 50px;
		padding:10px;
	}
	#price>span{
		font-size: 20px;
		color:red;
	}
	.smallPic{/* 小图盒子 */
		width: 450px;
		height: 450px;
		/* border: 1px solid #ccc; */
		/* margin: 50px; */
		position: relative;
	}
	/* .smallPic */ .zoom{/* 放大镜 */
		position: absolute;
		/* top: 100px;
		left: 100px; */
		width: 175px;
		height: 175px;
		background: #FEDE4F;
		opacity: 0.5;
		border: 1px solid #aaa;
		display: none;
	}
	.bigPic{/* 大图盒子 */
		width: 400px;
		height: 400px;
		background: url(/images/datu1.jpg) no-repeat;/* 大图？ */
		position: absolute;
		top: 50px;
		left: 450px;
		border: 1px  solid #aaa;
		display: none;
		z-index: 9999;
	}
	</style>
</head>
<body>
	<div id="root">
		<div id="head">
			<h2>美食天下</h2>
			<span>我所有的朋友都是吃货</span>
			<ul id="nav">
				<li id="shou_font" class="top_nav"><a href="#">首页</a></li>
				<li class="top_nav"><a href="#">菜谱</a></li>
				<li class="top_nav"><a href="#">食材</a></li>
				<li class="top_nav"><a href="#">珍选</a></li>
				<li class="top_nav"><a href="#">健康</a></li>
				<li class="top_nav"><a href="#">专题</a></li>
				<li class="top_nav"><a href="#">社区</a></li>
				<li class="top_nav"><a href="#">话题</a></li>  				
				<li class="top_nav"><a href="#">登录</a></li>
				<li class="top_nav"><a href="#">注册</a></li><!--还要去掉下划线-->
			</ul>
			<div id="top_bar">
				<ul>
					<li class="top_bar_left"><a href="#">美食天下首页</a></li>
					<li class="top_bar_left"><a href="#">菜谱</a></li>
					<li class="top_bar_left"><a href="#">食材</a></li>
					<li class="top_bar_left"><a href="#">珍选</a></li>
					<li class="top_bar_left"><a href="#">健康</a></li>
					<li class="top_bar_left"><a href="#">专题</a></li>
					<li class="top_bar_left"><a href="#">社区</a></li>
					<li class="top_bar_left"><a href="#">话题</a></li>
					<li class="top_bar_right"><a href="#">注册</a></li>
					<li class="top_bar_right"><a href="#">登录</a></li>
				</ul>
			</div>
		</div>
		<div id="mid">
			<div id="m_left">
				<div class="smallPic" id="smallPic"><!-- 小图  -->
					<img src="/images/<%=data.sp_img%>" alt="" />
					<div class="zoom" id="zoom"></div><!-- 放大镜 -->
				</div>
				<!-- <img width="150" src="/images/<%=data.sp_img%>" alt=""> -->
				<div class="bigPic" id="bigPic"></div><!-- 大图盒子 -->
			</div>

			<div id="m_right">
				<h2><%=data.sp_name%></h2><!-- <br> -->
				<p>卖家包邮</p>
				<p>7天内无理由免费退货</p>
				<div id="jiajian">
					<input  type="button" value="-" onclick="less()">
					<span id="num">1</span>
					<input type="button" value="+" onclick="add()">
				</div>
				<div id="price">
					<span><%="￥"+data.sp_price%></span>
					<button><a href="http://localhost:3000/one/jiesuan">立即购买</a></button>
				</div>
				
			</div>
		</div>
		<div id="foot">
			<span>商品详情</span><!-- shangpin数据库还要有产地、保质期、贮存条件等 -->
			<div id="cptp">
				<table id="tbl">
					<tr>
						<th>商品名称</th>
						<th>产地</th>
						<th>保质期</th>
						<th>贮存条件</th>
					</tr>
					<tr>
						<td><%=data.sp_name%></td>
						<td><%=data.sp_add%></td>
						<td><%=data.sp_bzq%></td>
						<td><%=data.sp_tj%></td>
					</tr>
				</table>
			</div>
			
		</div>
	</div>

	<script>
	//购买数量加减
	var span=document.getElementsByTagName('span');
	var num=parseInt(span[1].innerHTML);//拿到数字
	//购买数量只能在0-100
	function less(){
		if (num==1) return;
		num--;
		span[1].innerHTML=num;
	}
	function add(){
		if(num>=100)return;
		num++;
		span[1].innerHTML=num;
	}

//图片放大
//得到元素
var smallPic = document.getElementById("smallPic");
var zoom = document.getElementById("zoom");
var bigPic = document.getElementById("bigPic");

//比例怎么算的？？大图800*800，大图盒子400*400
//小图盒子350*350  放大镜175*175
//所以放大镜总行程175 ， 大图的总行程400
var rate = 400 / 175;

//鼠标进入显示
smallPic.onmouseover = function(){
	zoom.style.display = "block";
	bigPic.style.display = "block";
}
//鼠标离开隐藏
smallPic.onmouseout = function(){
	zoom.style.display = "none";
	bigPic.style.display = "none";
}

//监听
smallPic.onmousemove = function(event){
	event = event || window.event;

	// 我们发现event.offsetX这个值你不能用！！哈哈哈哈哈哈哈哈哈哈哈
	// 为啥？因为onmousemove事件冒泡，鼠标碰到zoom这个盒子的时候事件将往上传播，
	// 又触发了smallPic的onmousemove事件。此时event.offsetX的坐标，以zoom左上角为准。
	// var x = event.offsetX ;
	// var y = event.offsetY ;


	// 得到页面的卷动值
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
	//费好大的劲，周转一下，得到x、y
	//减去87就是修正鼠标的位置，让鼠标在zoom盒子的中心点  - 87
	var x = event.clientX - (getAllLeft(smallPic) - scrollLeft) - 145;
	var y = event.clientY - (getAllLeft(smallPic) - scrollTop) - 170;

	if(x < 0){
		x = 0;
	}else if(x > 260){
		x = 260;
	}
	if(y < 0){
		y = 0;
	}else if(y > 260){
		y = 260;
	}

	//放大镜的移动
	zoom.style.top = y + "px";
	zoom.style.left = x + "px";

	bigPic.style.backgroundPosition = -x * rate + "px " + -y * rate + "px";
}

//返回这个元素在页面中的净位置
//就是这个元素所有offsetParent的offsetTop值的和
	function getAllTop(obj){
		//累加器，累加器的初始值不是0，而是自己现在offsetTop值
		//一会儿while语句直接从它爸开始了
		var allTop = obj.offsetTop;
		//当前正在算高度的元素
		var currentObj = obj;
		while(currentObj = currentObj.offsetParent){
			allTop += currentObj.offsetTop;
		}
		return allTop;
	}

	function getAllLeft(obj){
		//累加器，累加器的初始值不是0，而是自己现在offsetTop值
		//一会儿while语句直接从它爸开始了
		var allLeft = obj.offsetLeft;
		//当前正在算高度的元素
		var currentObj = obj;
		while(currentObj = currentObj.offsetParent){
			allLeft += currentObj.offsetLeft;
		}
		return allLeft;
	}
</script>
</body>


</html>